<template>
  <view style="background-color: #fff; min-height: 100%">
    <!-- 搜索 -->
    <view class="search">
      <image src="../static/icon/search.png" mode="" style="width: 40rpx; height: 40rpx"></image>
      <input type="text" placeholder="请输入标题" style="padding-left: 18rpx; flex: 1" />
      <button class="searchbtn">搜索</button>
    </view>
    <!-- 搜索历史 -->
    <view class="history">
      <text class="searchhistory">历史搜索</text>
      <image src="../static/icon/delete.png" style="width: 40rpx; height: 40rpx"></image>
    </view>
    <view class="historyitem" v-for="(item, index) in recordlist" :key="index">{{ item }}</view>
    <!-- 搜索活动 -->
    <view v-if="true" class="activelist" v-for="item in list" :key="item.time">
      <view class="left">
        <image :src="item.img" mode="" />
        <text class="baoming">{{ item.hit }}</text>
      </view>
      <view class="right">
        <view class="title overline">{{ item.h2 }}</view>
        <view class="time">
          <image src="https://qn.boruichengyi.com/static/index/images/time.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
          {{ item.time }}
        </view>
        <view class="time">
          <image src="https://qn.boruichengyi.com/static/index/images/position.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
          {{ item.addres }}
        </view>
        <view style="display: flex; justify-content: space-between">
          <view style="font-size: 24rpx">
            <view class="pusher">发起人：{{ item.person }}</view>
            <view class="peoplenum">报名人数：{{ item.number }}</view>
          </view>
          <button class="btn">复制活动</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recordlist: ['黄山', '老君山', '黄山', '老君山', '黄山', '老君山', '黄山', '老君山', '黄山', '老君山'],
      list: [
        {
          img: '/static/index/images/list1.png',
          h2: '薅羊毛重磅活动来啦！！！活动 主题：吃喝玩乐在北京薅羊毛重磅活动来啦！！！活动 主题：吃喝玩乐在北京',
          time: '11.12 09:30-12.01 10:20',
          addres: '东枫国际体育园灯光草地场东枫国际体育园灯光草地场',
          person: '少年',
          number: '5/20',
          hit: '报名中'
        },
        {
          img: '/static/index/images/list2.png',
          h2: '进击保龄球STRJKEBOWLING',
          time: '11.12 09:30-12.01 10:20',
          addres: '东枫国际体育园灯光草地场东枫国际体育园灯光草地场',
          person: '少年',
          number: '5/20',
          hit: '报名中'
        },
        {
          img: '/static/index/images/list3.png',
          h2: '套住欢乐，高玩捕手，冲冲冲！ 团建｜趣味｜快乐',
          time: '11.12 09:30-12.01 10:20',
          addres: '东枫国际体育园灯光草地场东枫国际体育园灯光草地场',
          person: '少年',
          number: '5/20',
          hit: '已报满'
        }
      ]
    };
  }
};
</script>

<style lang="less">
.search {
  display: flex;
  align-items: center;
  width: 676rpx;
  height: 70rpx;
  margin-left: 30rpx;
  background: #f8f8f8;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  opacity: 1;
  .searchbtn {
    width: 104rpx;
    height: 70rpx;
    font-size: 26rpx;
    background: #0398ff;
    color: #fff;
    margin-left: 10rpx;
    padding: 0;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    opacity: 1;
  }
}
.history {
  display: flex;
  justify-content: space-between;
  margin: 36rpx 30rpx;
  .searchhistory {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
  }
}
.historyitem {
  display: inline-block;
  height: 56rpx;
  line-height: 56rpx;
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  padding: 8rpx 20rpx;
  color: #000000;
  background: #f8f8f8;
  margin-left: 16rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
// 推荐活动列表
.activelist {
  display: flex;
  /*  width: 702rpx; */
  /* height: 340rpx; */
  padding: 20rpx;
  margin: 20rpx 24rpx 0rpx 24rpx;
  background-color: #e8f6ff;
  .left {
    position: relative;
    width: 220rpx;
    height: 300rpx;
    margin-right: 20rpx;
    image {
      width: 220rpx;
      height: 300rpx;
    }
    .baoming {
      position: absolute;
      color: #fff;
      font-size: 20rpx;
      top: 0;
      left: 0;
      width: 90rpx;
      height: 40rpx;
      border-radius: 30rpx 0 30rpx 0;
      text-align: center;
      line-height: 40rpx;
      background-color: black;
      opacity: 0.3;
    }
  }
  .right {
    .title {
      width: 392rpx;
      height: 80rpx;
      font-weight: 700;
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }
    .overline {
      height: 38px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .time {
      font-size: 26rpx;
      margin-bottom: 10rpx;
    }
    .pusher {
      margin-bottom: 20rpx;
    }
    .btn {
      width: 160rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 24rpx;
      background: #0398ff;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      margin-top: 20rpx;
      color: #fff;
    }
  }
}
</style>
